<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加客户</title>
    <style>
        /* 样式表进行了相应的优化 */
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        #customerForm {
            display: flex;
            flex-direction: column;
            align-items: center; /* 使输入框居中 */
            margin-bottom: 20px;
        }

        .inputWrapper {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
            width: 300px; /* 设置输入框宽度 */
        }

        .inputWrapper label {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .inputWrapper input[type="text"] {
            width: 100%; /* 输入框宽度使用百分比 */
            height: 30px;
            padding: 5px;
            margin-top: 5px; /* 上下间距 */
            border-radius: 3px;
            border: 1px solid #ccc;
        }

        #submitButton {
            display: block;
            width: 120px;
            margin: 10px auto; /* 水平居中并增加上下间距 */
            text-align: center;
            background-color: #007bff; /* 按钮背景色 */
            color: #fff; /* 文本颜色 */
            border: none;
            padding: 8px 10px;
            cursor: pointer;
        }

        .messages {
            color: red;
            list-style-type: none;
            padding: 0;
        }
    </style>
</head>
<body>
<h1 style="text-align: center; margin-bottom: 20px;">添加客户</h1>

<div class="wap">
    <form id="customerForm">
        <div class="inputWrapper">
            <label for="customer_name">公司名称：</label>
            <input type="text" id="customer_name" name="customer_name" placeholder="请输入公司名称">
        </div>
        <div class="inputWrapper">
            <label for="creditCode">信用代码：</label>
            <input type="text" id="creditCode" name="creditCode" placeholder="请输入信用代码">
        </div>
        <div class="inputWrapper">
            <label for="address">地址：</label>
            <input type="text" id="address" name="address" placeholder="请输入地址">
        </div>
        <div class="inputWrapper">
            <label for="contactPerson">联系人：</label>
            <input type="text" id="contactPerson" name="contactPerson" placeholder="请输入联系人">
        </div>
        <div class="inputWrapper">
            <label for="contactNumber">联系电话：</label>
            <input type="text" id="contactNumber" name="contactNumber" placeholder="请输入联系电话">
        </div>
        <button type="submit" id="submitButton">提交</button>
    </form>
</div>
<div id="message" class="messages"></div>

<script>
    const form = document.getElementById('customerForm');
    const messageDiv = document.getElementById('message');

    form.addEventListener('submit', function(event) {
        event.preventDefault();

        const formData = new FormData(form);

        fetch('/submit_customer', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                messageDiv.textContent = data.message;
                form.reset(); // 清空输入框的内容
            } else {
                messageDiv.textContent = '错误: ' + data.message;
            }
        })
        .catch(error => {
            messageDiv.textContent = '错误: ' + error;
        });
    });

</script>
</body>
</html>
